<template>
  <div class="admin-index-container">
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-header style="text-align: right; font-size: 12px; width: 100%;">
        <div class="title">博客后台管理系统</div>
        <div class="to-home"><router-link to="/home">博客首页</router-link></div>
        <el-dropdown>
          <div class="avatar-wrapper">
            <img :src="baseUrl + avatar" class="user-avatar" />
            <span>{{username}}<i class="el-icon-arrow-down"></i></span>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><router-link to="/home">博客首页</router-link></el-dropdown-item>
            <el-dropdown-item><router-link to="/login">退出登录</router-link></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-main style="padding:0; height: 100%;">
        <el-container style="height: 100%;">
          <AsideNavMenu />

          <el-main>
            <router-view></router-view>
          </el-main>

        </el-container>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// import avatar from '../../assets/avatar.png';
import { baseUrl } from "../../api";
import AsideNavMenu from "../../components/AsideNavMenu";
export default {
  name: "Index",
  components: {
    AsideNavMenu
  },
  data() {
    return {
      baseUrl: baseUrl,
      avatar: '',
      username: ''
    }
  },
  methods: {
    getToken() {
      let data= window.sessionStorage.getItem('userInfo');
      // console.log(data);
      if(!data) {
        this.$router.replace('/login');
        return;
      }
      let userInfo= JSON.parse(data)
      this.username= userInfo.username;
      this.avatar= userInfo.avatar;
    }
  },
  created() {
    this.getToken()
  }
}
</script>

<style scoped lang="less">
  .admin-index-container {
    width: 100%;
    height: 100%;

    .title {
      float: left;
      color: #fff;
      font-size: 24px;
      margin-left: -15px;
    }
    .to-home {
      float: left;
      color: #fff;
      font-size: 18px;
      margin-left: 20px;
      cursor:pointer;
    }

    .avatar-wrapper {
      line-height: 60px;
      height: 60px;
      .user-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        margin-right: 5px;
        animation: avatarAnimation 3s infinite linear;
        vertical-align: middle;
      }
      i {
        margin-left: 4px;
      }
    }


    @keyframes avatarAnimation {
      from {
        transform: rotate(0);
      }
      to {
        transform: rotate(360deg);
      }
    }
  }
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
</style>
